<template>
    <div class="preview-img-wrap animate__animated" :class="[ImgVisible ? 'animate__fadeIn' : 'animate__fadeOut']">
        <div class="close" @click="closeImgPreview">
            <i class="el-icon-close close-icon"></i>
        </div>
        <div class="previewImgCon">
            <el-image :src="imgSrc" fit="contain" class="previewImg">
                <div slot="error" class="image-slot">
                    <p>暂无图片</p>
                </div>
            </el-image>
        </div>
    </div>
</template>
<script>
export default {
    name: "previewImage",
    props: {
        imgSrc: {
            type: String,
            default: "",
        },
        ImgVisible: {
            type: Boolean,
        }
    },
    watch: {
        ImgVisible: {
            immediate: true,
            handler(newV, oldV) {
                this.ImgVisible = newV;
                console.log('ImgVisible', this.ImgVisible)
                if (this.ImgVisible) {
                    this.$store.commit('SET_HEADER_Z_INDEX', 0);
                } else {
                    this.$store.commit('SET_HEADER_Z_INDEX', 1);
                }
            }
        }
    },
    data() {
        return {

        };
    },
    created() { },
    methods: {
        closeImgPreview() {
            this.$emit('close')
        }
    },
};
</script>
<style scoped>
.preview-img-wrap {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 222;
    animation-duration: 0.2s;
}

.close {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    cursor: pointer;
    z-index: 222;
}

.close-icon {
    color: #fff;
    font-size: 30px;
}

.previewImgCon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.previewImg {
    width: 70%;
    height: 70%;
}
</style>